<template>
  <div>
    <quill-editor
      ref="quillEditorRef"
      v-model="content"
      :options="editorOption"
    />
    <el-upload
      class="avatar-uploader"
      :action="action"
      name="file"
      :headers="headers"
      :show-file-list="false"
      list-type="picture"
      :multiple="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload"
    />
    <el-dialog
      id="videoDialog"
      title="提示"
      :visible.sync="dialogVisible"
    >
      <el-upload
        :action="action"
        :headers="headers"
        list-type="picture-card"
        multiple
        :on-success="videoUploadSuccess"
        :on-preview="videoPictureCardPreview"
        :on-remove="videoRemove"
      >
        <i class="el-icon-plus" />
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import QuillEditor from '@/components/QuillEditor/index.vue'
export default {
  // 对QuillEditor默认上传图片和上传视频的改造
  name: 'ElQuillEditor',
  components: {
    QuillEditor
  },
  model: {
    // 这个prop指定v-model绑定哪个props下的值
    prop: 'parentProp',
    // 指定v-model子传父的事件
    event: 'change'
  },
  props: {
    parentProp: {
      type: String,
      default: ''
    },
    action: {
      type: String,
      require: true,
      default: ''
    },
    headers: {
      type: Object,
      default: () => {}
    },
    imageFormats: {
      type: Array,
      default: () => ['image/jpeg', 'image/png']
    },
    imageErrorMsg: {
      type: String,
      default: '请上传jpg或png格式的图片!'
    },
    videoFormats: {
      type: Array,
      default: () => ['video/mp4']
    },
    videoErrorMsg: {
      type: String,
      default: '请上传mp4格式的视频!'
    }
  },
  data() {
    return {
      option: 'image',
      dialogVisible: false,
      content: this.parentProp,
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
              ['blockquote', 'code-block'], // 引用  代码块
              [{ header: 1 }, { header: 2 }], // 1、2 级标题
              [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
              [{ script: 'sub' }, { script: 'super' }], // 上标/下标
              [{ indent: '-1' }, { indent: '+1' }], // 缩进
              // [{'direction': 'rtl'}],                         // 文本方向
              [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
              [{ font: [] }], // 字体种类
              [{ align: [] }], // 对齐方式
              ['clean'], // 清除文本格式
              ['link', 'image', 'video'] // 链接、图片、视频
            ], // 工具菜单栏配置
            handlers: {
              image: (value) => {
                this.option = 'image'
                document.querySelector('.avatar-uploader input').click()
              },
              video: (value) => {
                this.option = 'video'
                document.querySelector('.avatar-uploader input').click()
              }
            }
          }
        },
        placeholder: '请编辑...', // 提示
        readyOnly: false, // 是否只读
        theme: 'snow', // 主题 snow/bubble
        syntax: true // 语法检测
      }
    }
  },
  watch: {
    content(newVal, oldVal) {
      this.changeValue(newVal)
    }
  },
  methods: {
    changeValue(newContent) {
      this.$emit('change', newContent)
    },
    getContent() {
     
    },
    beforeUpload(file) {
      if (this.option === 'image') {
        if (this.imageFormats.includes(file.type)) {
          return true
        } else {
          this.$message.warning(this.imageErrorMsg)
          return false
        }
      }

      if (this.option === 'video') {
        if (this.videoFormats.includes(file.type)) {
          return true
        } else {
          this.$message.warning(this.videoErrorMsg)
          return false
        }
      }
      return false
    },
    uploadSuccess(res) {
      if (res.code === 1) {
        const quill = this.$refs.quillEditorRef.quill
        const length = quill.getSelection().index
        if (this.option === 'image') {
          quill.insertEmbed(length, 'image', res.data.url)
        }
        if (this.option === 'video') {
          quill.insertEmbed(length, 'video', res.data.url)
        }
        quill.setSelection(length + 1)
      } else {
        this.$message.error(res.msg)
      }
    },
    uploadError() {

    },
    uploadVideo() {
      this.dialogVisible = true
    },
    videoPictureCardPreview() {

    },
    videoRemove() {

    },
    videoUploadSuccess(res) {
      console.log(res.data.url)
    }
  }
}
</script>
<style>
.editor {
  line-height: normal !important;
  height: 800px;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>
